<template>
	<div>

		<el-card shadow="never" class="card">
			<div slot="header">
				<span>{{title}}</span>
			</div>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
				<el-form-item prop="author" label="作者">
					<el-input v-model="form.author"></el-input>
				</el-form-item>
				<el-form-item prop="title" label="标题">
					<el-input v-model="form.title"></el-input>
				</el-form-item>
				<el-form-item label="是否显示">

					<el-switch v-model="form.isShow" :active-value="1" :inactive-value="0">
					</el-switch>

				</el-form-item>
				<!-- 上传图片 -->
				<el-form-item label="文章图片">
					<el-upload ref="upload" action="/lejuAdmin/material/uploadFileOss" :headers="headers"
						:on-success="uploadSuccess">


						<el-button size="mini" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
					<img v-if="form.coverImg" style="width: 200px; height: 200px;" :src="form.coverImg" alt="">

				</el-form-item>
				<el-form-item>
					<el-button type="primary" :loading="loading" @click="onSubmit">{{id? "编辑文章" : "新增文章"}}</el-button>
					<el-button type="primary" disabled>取消</el-button>
				</el-form-item>
				<el-form-item label="编辑类型">
					
					<el-radio-group v-model="form.editorType">
						<el-radio :label="0">富文本</el-radio>
						<el-radio :label="1">MarkdownEditor</el-radio>
						
					</el-radio-group>
					<!-- 富文本 -->
					<TiEditor ref="Ti" v-show="form.editorType == 0"></TiEditor>
					<!-- 马克当 -->
					<MdEditor ref="Md" v-show="form.editorType == 1"></MdEditor>
				</el-form-item>
				</el-form-item>
			</el-form>

		</el-card>
	</div>
</template>

<script>
	import {
		findArticles,
		del,
		addArticle,
		productArticle,
		updateArticle,
		changeShowStatus
	} from "@/api/content/article.js"
	import {
		getToken
	} from "@/utils/myAuth.js"
	// 引入富文本组件
	import TiEditor from "@/components/Tinymce"
	import MdEditor from "@/components/MarkdownEditor"
	export default {
		components: {
			TiEditor,
			MdEditor
		},
		data() {
			const token = getToken()
			return {

				headers: {
					token: token
				}, //上川文件的请求头
				id: "",
				title: "新增文章",
				loading: false,
				value: '100',
				rules: {
					author: [{
							required: true,
							message: '请输入作者名称',
							trigger: 'blur'
						},

					],
					title: [{
							required: true,
							message: '请输入文章名称',
							trigger: 'blur'
						},

					],
				},
				form: {
					author: "",
					title: "",
					isShow: 1,
					coverImg: "",
					editorType: 0 //默认是富文本
				}
			}
		},
		created() {
			this.id = this.$route.params.id
			if (this.id) {
				this.title = "编辑文章"
				this.getFindArticles()
			}
		},
		methods: {
			// 获取文章明细
			getFindArticles() {
				this.loading = true
				productArticle(this.id).then(res => {
					console.log(res)
					if (res.success == true) {


						this.form = res.data.productArticle
						// 给富文本赋值
						if(this.form.editorType === 0){
							this.$refs.Ti.setDelayContent(this.form.content1)
						}else{
							this.$refs.Md.setHtml(this.form.content1)
						}
						
					} else {
						this.$message.error("获取列表失败")
					}
					this.loading = false
				})
			},
			// 图片上传成功
			uploadSuccess(res) {
				console.log(res)
				if (res.success) {
					this.form.coverImg = res.data.fileUrl
				} else {
					this.$message.error("图片上传失败")
				}
				this.$refs.upload.clearFiles()
			},
			
			//立即创建
			onSubmit() {
				// 校验
				this.$refs.form.validate((valid) => {
					if (valid) {
						
						if(this.form.editorType ===0){
							// 提交前,给form添加富文本的值
							// 富文本的话获取Ti的getContent
							this.form.content1 = this.$refs.Ti.getContent()
						}else{
							// 马克党的话获取Md的getHtml
							this.form.content1 = this.$refs.Md.getHtml()
						}
						if (this.id) {
							// 编辑
							this.loading = true
							updateArticle(this.form).then(res => {
								console.log(res)
								if (res.success) {
									this.$router.push({
										name: "Article"
									})
								} else {
									this.$message.error("编辑失败,请检查网诺设置")
								}
								this.loading = false
							})

						} else {
							// 新增
							this.loading = true

							console.log(this.form.content1)
							addArticle(this.form).then(res => {

								if (res.success) {
									this.$router.push({
										name: "Article"
									})
								} else {
									this.$message.error("创建失败,请检查网诺设置")
								}
								this.loading = false
							})
						}




					} else {
						this.$message.error("请填写必要信息")
						return false;
					}
				});


			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.card {
		margin: 30px;
	}
</style>
